<template>
	<div id="app">
    <header-bar></header-bar>
		<router-view></router-view>
    <footer-bar></footer-bar>
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="230" :backPosition="0"></back-to-top>
    </el-tooltip>
	</div>
</template>

<script>
  import { HeaderBar, FooterBar } from 'views/layout';
  import BackToTop from 'components/BackToTop';
  export default{
    name: 'App',
    components: {
      HeaderBar,
      FooterBar,
      BackToTop
    },
    data() {
      return {
        myBackToTopStyle: {
          right: '40px',
          bottom: '40px',
          width: '40px',
          height: '40px',
          'border-radius': '4px',
          'line-height': '45px', // 请保持与高度一致以垂直居中
          background: '#e7eaf1'// 按钮的背景颜色
        }
      }
    }
  }
</script>

<style lang="scss">
  @import './styles/index.scss'; // 全局自定义的css样式
</style>
